<!-- 新增和编辑弹窗 -->
<template>
  <a-modal
    :width='800'
    :visible='visible'
    :confirm-loading='loading'
    :title="isUpdate ? '修改' : '新建'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible='updateVisible'
    @ok='save'
  >
    <a-form
      layout='horizontal'
      ref='form'
      :model='form'
      :rules='rules'
      :label-col='{ md: { span: 4 }, sm: { span: 24 } ,}'
      :wrapper-col='{ md: { span: 20 }, sm: { span: 24 } }'
    >

      <a-form-item label='传感器类型:' name='channelType'>
        {{viewData.channelType}}
      </a-form-item>
      <a-form-item label='第n路:' name='channelPosition'>
        {{viewData.channelPosition}}
      </a-form-item>
      <a-form-item label='传感器昵称:' name='nickname'>
        <a-input v-model:value='form.nickname' placeholder='请输入传感器昵称' allow-clear autocomplete='off' />
      </a-form-item>
      <a-form-item label='打开或者关闭:' name='onOff'>
        <a-switch
          checked-children='开'
          un-checked-children='关'
          autoFocus='false'
          :checked='onOffCheck'
          @change='onOffChange'
        />
      </a-form-item>
      <a-form-item label='报警上阈值:' name='highThreshold'>
        <a-input-number v-model:value='form.highThreshold' placeholder='请输入报警上阈值' allow-clear autocomplete='off' />
      </a-form-item>
      <a-form-item label='报警下阈值:' name='lowThreshold'>
        <a-input-number v-model:value='form.lowThreshold' placeholder='请输入报警下阈值' allow-clear autocomplete='off' />
      </a-form-item>
      <a-form-item label='报警连续检测时长:' name='warnTime'>
        <a-input-number v-model:value='form.warnTime' placeholder='请输入报警连续检测时长' allow-clear autocomplete='off' />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {getEnvControlType} from "@/utils/device-property-util";
import {DeviceEnvControlQueueApi} from "@/api/property/DeviceEnvControlQueueApi";
import {message} from "ant-design-vue";

export default {
  name: 'DeviceEnvControlChannelEdit',
  components: {
  },
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  created() {
    if (this.data) {
      this.form = Object.assign({}, this.data);
      this.isUpdate = true;
    } else {
      this.form = {};
      this.isUpdate = false;
    }
    this.viewData.channelType = getEnvControlType(this.data.channelType);
    this.viewData.channelPosition = this.data.channelPosition;
    this.onOffCheck = this.data.onOff == 1 ? true : false;
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        // nickname: [{message: '请输入传感器昵称', type: 'string', trigger: 'blur' }],
        // onOff: [{ required: true, message: '请输入打开或者关闭 0关闭 1打开', type: 'number', trigger: 'blur' }],
        // highThreshold: [{ required: true, message: '请输入报警上阈值', type: 'number', trigger: 'blur' }],
        // lowThreshold: [{ required: true, message: '请输入报警下阈值', type: 'number', trigger: 'blur' }],
        // warnTime: [{ required: true, message: '请输入报警连续检测时长', type: 'number', trigger: 'blur' }],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      viewData : {},
      onOffCheck : false,
      configUpdateTimer : null
    };
  },
  methods: {
    /**
     * 保存和编辑
     *
     * @author cancan
     * @date 2022/08/28 08:12
     */
    async save() {
      console.log(this.form);
      // 校验表单
      await this.$refs.form.validate();

      // 修改加载框为正在加载
      this.loading = true;
      let  updatedata = {
        nickname : this.form.nickname,
        highThreshold : this.form.highThreshold,
        lowThreshold : this.form.lowThreshold,
        warnTime : this.form.warnTime,
        onOff : this.onOffCheck ? 1 : 0,
        channelType : this.data.channelType,
        channelPosition : this.data.channelPosition,
        channelId : this.data.channelId,
        multiple : this.data.multiple,
        id : this.data.deccId
      };
      let updateDataRecord = {
        recordId: this.data.recordId,
        updateData: JSON.stringify({ old: [this.data], update: [updatedata]}),
        dictate : 15
      };
      let result = DeviceEnvControlQueueApi.add(updateDataRecord);
      result
        .then(result => {
          message.success(result.message);
          this.configUpdateTimer = setInterval(this.checkConfigUpdateInterval, 5000);
        })
        .catch(() => {
          this.loading = false;
        });
    },

    clearConfigUpdateRef(){
      this.loading = false;
      clearInterval(this.configUpdateTimer);
    },

    checkConfigUpdateInterval(){
      let that = this;
      this.checkProcess(15, this.clearConfigUpdateRef, function(){
        // 关闭弹框，通过控制visible的值，传递给父组件
        that.updateVisible(false);
        // 触发父组件done事件
        that.$emit('done');
      });
    },

    checkProcess(dictate, clearCallback, callback) {
      let params = {
        recordId: this.data.recordId,
        dictate: dictate
      };
      let result = DeviceEnvControlQueueApi.workingDetail(params);
      result
        .then(result => {
          if (!result || !result.decqId) { //处理完成了
            clearCallback && clearCallback(); //去掉菊花+清除循环调用
            callback && callback(); //用户自定义
          }
        })
        .catch(() => {
          clearCallback && clearCallback(); //去掉菊花+清除循环调用
        });
    },

    /**
     * 更新编辑界面的弹框是否显示
     *
     * @param value true-显示，false-隐藏
     * @author cancan
     * @date 2022/08/28 08:12
     */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    onOffChange (checked) {
      this.onOffCheck = checked;
    }
  }
};
</script>
